<template>
  <div class="recommend">
    <Title>推荐歌单</Title>
    <ul class="remd_ul">
      <router-link
        v-for="item in recommendMusicList"
        :key="item.id"
        tag="li"
        :to="{
          name: 'MusicForm',
          params: {
            id: item.id,
            playCount: item.playCount,
            picUrl: item.picUrl,
          },
        }"
      >
        <div class="remd_img">
          <img :src="item.picUrl" alt="" />
          <span>{{ item.playCount | filterNum }}</span>
        </div>
        <p class="remd_text">{{ item.name }}</p>
      </router-link>
    </ul>
    <Loading v-if="recommendMusicList.length <= 0" />
    <Title>最新音乐</Title>
    <MusicList :newMusicList="newMusicList"></MusicList>
    <footer>
      <div class="logo"></div>
    </footer>
  </div>
</template>

<script>
import Title from "../components/Title";
import MusicList from "../components/MusicList";
import Loading from "../components/Loading";
export default {
  name: "Recommend",
  components: {
    Title,
    MusicList,
    Loading,
  },
  data() {
    return {
      recommendMusicList: [],
      newMusicList: [],
    };
  },
  // methods:{
  //     playMusic(id){
  //         this.$emit('playMusic',id);
  //     }
  // },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.$root.playingMusic.idList = [];
      vm.axios.get("/personalized?limit=6").then((response) => {
        // console.log(response.data.result);
        vm.recommendMusicList = response.data.result;
      });
      vm.axios.get("/personalized/newsong?limit=10").then((response) => {
        vm.newMusicList = response.data.result;
        // console.log(response);
      });
    });
  },
  filters: {
    filterNum(value) {
      return (value / 10000).toFixed(1) + "万";
    },
  },
};
</script>

<style lang="less" scoped>
.recommend {
  padding-top: 20px;
}
.remd_ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 24px;
  li {
    width: 33%;
    margin-bottom: 16px;
    .remd_img {
      width: 100%;
      position: relative;
      span {
        position: absolute;
        right: 5px;
        top: 2px;
        z-index: 3;
        color: #fff;
        font-size: 12px;
        text-shadow: 1px 0 0 rgba(0, 0, 0, 0.15);
        background-image: url(../assets/erji.svg);
        background-size: 11px 10px;
        background-position: 0 4px;
        background-repeat: no-repeat;
        padding-left: 13px;
      }
      img {
        width: 100%;
        display: block;
      }
      &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 20px;
        z-index: 2;
        background-image: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0.2),
          rgba(0, 0, 0, 0)
        );
      }
    }
    .remd_text {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      padding: 6px 2px 0 6px;
      min-height: 30px;
      line-height: 1.2;
      font-size: 13px;
      text-align: left;
    }
  }
}
footer {
  position: relative;
  padding-top: 53.3%;
  margin-top: 4px;
  background: url(../assets/recommand_bg_3x.png) no-repeat;
  background-size: contain;
}
</style>
